<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form
        label-position="right"
        label-width="150px"
        :model="search"
        ref="searchForm"
        class="searchBox-content"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="消息状态：" prop="readStatus">
              <el-select filterable v-model="search.readStatus">
                <el-option
                  v-for="item in controlData.readStatus"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button style="margin-left: -100px" type="primary" @click="searchQuery">查询</el-button>
              <el-button
                type="info"
                @click="
              search = {};
              searchQuery();
            "
              >重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <qm-table
      :data="query"
      :formOptions="{ labelWidth: '120px' }"
      :showCheckbox="false"
      :showToolbar="false"
      :showEdit="false"
      :showDelete="false"
      :showView="false"
      :showMenu="false"
      :isCustomForm="true"
      :modalOptions="{ height: '80%', width: '75%' }"
      ref="qmTable"
      keyProp="logId"
      menuType="text"
      :formModalEvents="{
        hide: formModalHide
      }"
    >
      <qm-table-column title="状态" field="readStatus" width="60px" align="center">
        <template v-slot:content="{ row }">
          <span>
            <template v-if="row.readStatus=='read'">
              <i class="far fa-envelope-open" title="已读"></i>
            </template>
            <template v-else>
              <i class="fas fa-envelope" title="未读"></i>
            </template>
          </span>
        </template>
      </qm-table-column>
      <qm-table-column field="title" title="消息标题" align="center">
        <template v-slot:content="{ row }">
          <el-link type="primary" @click="viewInfo(row)">{{row.title}}</el-link>
        </template>
      </qm-table-column>
      <qm-table-column
        field="messageType"
        width="250"
        align="center"
        :renderFunc="renderMessageType"
      >消息类型</qm-table-column>
      <qm-table-column field="startTime" align="center" width="200">接收时间</qm-table-column>
      <template v-slot:form="{ model }">
        <el-form class="qm-table-form" label-width="100px" :model="model">
          <el-row>
            <el-col :span="24">
              <editor v-model="model.sysMessage.body" :globalOptions="{}" :disabled="true" />
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <qm-file-upload
                :dataKey="model.sysMessage.dataKey"
                :categories="['正式稿']"
                :editable="false"
                title="附件"
                fileSize="20"
                fileType=".jpg,.png,.doc,.docx,.xls,.xlsx,.pdf,.txt,.zip,.rar"
              ></qm-file-upload>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";
import Editor from "@/components/Editor";
import QmFileUpload from "@/libs/components/qm-file-upload";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/message/me/getListModel",
      query: "/message/me/query",
    };
  }

  mixin() {
    return {
      components: {
        Editor,
        QmFileUpload,
      },
      methods: {
        viewInfo(row) {
          this.$refs["qmTable"].viewInfo(row);
        },
        read(row) {
          request({
            url: `/message/me/read/${row.logId}`,
            method: "get",
          }).then((r) => {
            if (r && r.success) {
              this.$refs["qmTable"].refresh();
              this.notifySuccess("消息已阅");
            } else {
              this.notifyError((r || {}).message || "请求失败");
            }
          });
        },
        openAttachment(attachment) {
          this.$root.openFile(
            attachment.fileType.replace(".", ""),
            attachment.attachmentId
          );
        },
        renderMessageType(data, row, column) {
          const find = this.super.$util.find(
            this.controlData.messageTypes,
            (item) => {
              return item.value === data;
            }
          );
          return (find || {}).key;
        },
        renderReadStatus(data, row, column) {
          const find = this.super.$util.find(
            this.controlData.readStatus,
            (item) => {
              return item.value === data;
            }
          );
          return (find || {}).key;
        },
        formModalHide() {
          this.$refs["qmTable"].refresh();
        },
      },
    };
  }
}
</script>

<style scoped>
</style>
